<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旅行社系统 - 客户管理</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <link rel="stylesheet" href="css/main.css">
    <!-- Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <div class="container-fluid">
            <div class="row">
                <sidebar-nav 
                    current-page="customers"
                    @logout="handleLogout">
                </sidebar-nav>

                <!-- 主内容区 -->
                <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
                    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                        <h1 class="h2">客户管理</h1>
                        <div class="btn-toolbar mb-2 mb-md-0">
                            <button type="button" class="btn btn-primary" @click="showCreateModal">
                                <i class="bi bi-plus"></i> 新增客户
                            </button>
                        </div>
                    </div>

                    <!-- 搜索栏 -->
                    <div class="row mb-3">
                        <div class="col-md-3">
                            <input type="text" class="form-control" v-model="searchQuery.customerNo" placeholder="客户编号">
                        </div>
                        <div class="col-md-3">
                            <input type="text" class="form-control" v-model="searchQuery.name" placeholder="客户姓名">
                        </div>
                        <div class="col-md-3">
                            <select class="form-select" v-model="searchQuery.level">
                                <option value="">所有等级</option>
                                <option value="普通">普通客户</option>
                                <option value="VIP">VIP客户</option>
                                <option value="高级VIP">高级VIP客户</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <button class="btn btn-primary" @click="searchCustomers">
                                <i class="bi bi-search"></i> 搜索
                            </button>
                            <button class="btn btn-secondary ms-2" @click="resetSearch">
                                <i class="bi bi-x-circle"></i> 重置
                            </button>
                        </div>
                    </div>

                    <!-- 客户列表 -->
                    <div class="table-responsive">
                        <table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th>客户编号</th>
                                    <th>姓名</th>
                                    <th>显示名称</th>
                                    <th>性别</th>
                                    <th>生日</th>
                                    <th>公司名称</th>
                                    <th>等级</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-if="customers && customers.length === 0">
                                    <td colspan="8" class="text-center">暂无数据</td>
                                </tr>
                                <tr v-else v-for="customer in customers" :key="customer.ID">
                                    <td>{{ customer.LegacyCustomerNo }}</td>
                                    <td>{{ customer.Name }}</td>
                                    <td>{{ customer.DisplayName }}</td>
                                    <td>{{ customer.Sex }}</td>
                                    <td>{{ customer.Birthday ? formatDate(customer.Birthday) : '' }}</td>
                                    <td>{{ customer.CompanyName }}</td>
                                    <td>
                                        <span :class="getCustomerLevelClass(customer.CustomerLevel)">
                                            {{ customer.CustomerLevel }}
                                        </span>
                                    </td>
                                    <td>
                                        <button class="btn btn-sm btn-primary me-2" @click="showEditModal(customer)">
                                            <i class="bi bi-pencil"></i>
                                        </button>
                                        <button class="btn btn-sm btn-info me-2" @click="showPassengersModal(customer)">
                                            <i class="bi bi-people"></i>
                                        </button>
                                        <button class="btn btn-sm btn-secondary me-2" @click="showAddressesModal(customer)">
                                            <i class="bi bi-geo-alt"></i>
                                        </button>
                                        <button class="btn btn-sm btn-warning" @click="showTelNosModal(customer)">
                                            <i class="bi bi-telephone"></i>
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- 分页器 -->
                    <nav aria-label="Page navigation" class="mt-3">
                        <ul class="pagination justify-content-center">
                            <li class="page-item" :class="{ disabled: currentPage === 1 }">
                                <a class="page-link" href="#" @click.prevent="changePage(currentPage - 1)">上一页</a>
                            </li>
                            <li class="page-item" v-for="page in totalPages" :key="page"
                                :class="{ active: currentPage === page }">
                                <a class="page-link" href="#" @click.prevent="changePage(page)">{{ page }}</a>
                            </li>
                            <li class="page-item" :class="{ disabled: currentPage === totalPages }">
                                <a class="page-link" href="#" @click.prevent="changePage(currentPage + 1)">下一页</a>
                            </li>
                        </ul>
                    </nav>

                    <!-- 新增/编辑客户模态框 -->
                    <div class="modal fade" id="customerModal" tabindex="-1">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">{{ isEditing ? '编辑客户' : '新增客户' }}</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                </div>
                                <div class="modal-body">
                                    <form @submit.prevent="handleSubmit">
                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">客户编号</label>
                                                <input type="text" class="form-control" v-model="form.LegacyCustomerNo" required>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">客户等级</label>
                                                <select class="form-select" v-model="form.CustomerLevel" required>
                                                    <option value="普通">普通客户</option>
                                                    <option value="VIP">VIP客户</option>
                                                    <option value="高级VIP">高级VIP客户</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">姓名</label>
                                                <input type="text" class="form-control" v-model="form.Name" required>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">显示名称</label>
                                                <input type="text" class="form-control" v-model="form.DisplayName" required>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">性别</label>
                                                <select class="form-select" v-model="form.Sex" required>
                                                    <option value="男">男</option>
                                                    <option value="女">女</option>
                                                </select>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">生日</label>
                                                <input type="date" class="form-control" v-model="form.Birthday" required>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">公司名称</label>
                                                <input type="text" class="form-control" v-model="form.CompanyName" required>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">联系电话</label>
                                                <input type="tel" class="form-control" v-model="form.PDFTelNo" required>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">电子邮箱</label>
                                                <input type="email" class="form-control" v-model="form.PDFEmail" required>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">联系地址</label>
                                                <input type="text" class="form-control" v-model="form.PDFAddress" required>
                                            </div>
                                        </div>

                                        <div class="row mb-3">
                                            <div class="col-md-6">
                                                <label class="form-label">显示名称</label>
                                                <input type="text" class="form-control" v-model="form.DisplayName">
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-label">打印显示名称</label>
                                                <input type="text" class="form-control" v-model="form.PDFName" required>
                                            </div>
                                        </div>

                                        <div class="mb-3">
                                            <label class="form-label">备注</label>
                                            <textarea class="form-control" v-model="form.Memo" rows="3"></textarea>
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                                    <button type="button" class="btn btn-primary" @click="handleSubmit">保存</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 添加乘客管理模态框 -->
                    <div class="modal fade" id="passengersModal" tabindex="-1">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">乘客管理 - {{ selectedCustomer?.Name }}</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                </div>
                                <div class="modal-body">
                                    <!-- 新增乘客表单 -->
                                    <form @submit.prevent="handlePassengerSubmit" class="mb-4">
                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">姓名</label>
                                                <input type="text" class="form-control" v-model="passengerForm.Name" required>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">生日</label>
                                                <input type="date" class="form-control" v-model="passengerForm.Birthday" required>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">证件类型</label>
                                                <select class="form-select" v-model="passengerForm.CertificateType" required>
                                                    <option value="护照">护照</option>
                                                    <option value="身份证">身份证</option>
                                                    <option value="回乡证">回乡证</option>
                                                </select>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">证件号码</label>
                                                <input type="text" class="form-control" v-model="passengerForm.CertificateNo" required>
                                            </div>
                                        </div>
                                        <div class="text-end">
                                            <button type="submit" class="btn btn-primary">
                                                <i class="bi bi-plus-circle"></i> 添加乘客
                                            </button>
                                        </div>
                                    </form>

                                    <!-- 乘客列表 -->
                                    <div class="table-responsive">
                                        <table class="table table-striped">
                                            <thead>
                                                <tr>
                                                    <th>姓名</th>
                                                    <th>生日</th>
                                                    <th>证件类型</th>
                                                    <th>证件号码</th>
                                                    <th>操作</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr v-if="passengers.length === 0">
                                                    <td colspan="5" class="text-center">暂无乘客数据</td>
                                                </tr>
                                                <tr v-else v-for="passenger in passengers" :key="passenger.ID">
                                                    <td>{{ passenger.Name }}</td>
                                                    <td>{{ formatDate(passenger.BirthdayDTS) }}</td>
                                                    <td>{{ passenger.CertificateType }}</td>
                                                    <td>{{ passenger.CertificateNo }}</td>
                                                    <td>
                                                        <button class="btn btn-sm btn-danger" @click="deletePassenger(passenger)">
                                                            <i class="bi bi-trash"></i>
                                                        </button>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 添加地址管理模态框 -->
                    <div class="modal fade" id="addressesModal" tabindex="-1">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">地址管理 - {{ selectedCustomer?.Name }}</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                </div>
                                <div class="modal-body">
                                    <!-- 新增地址表单 -->
                                    <form @submit.prevent="handleAddressSubmit" class="mb-4">
                                        <div class="row">
                                            <div class="col-md-12 mb-3">
                                                <label class="form-label">详细地址</label>
                                                <input type="text" class="form-control" v-model="addressForm.Address" required>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">联系人</label>
                                                <input type="text" class="form-control" v-model="addressForm.ContactName" required>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">联系电话</label>
                                                <input type="tel" class="form-control" v-model="addressForm.ContactTelNo" required>
                                            </div>
                                        </div>
                                        <div class="text-end">
                                            <button type="submit" class="btn btn-primary">
                                                <i class="bi bi-plus-circle"></i> 添加地址
                                            </button>
                                        </div>
                                    </form>

                                    <!-- 地址列表 -->
                                    <div class="table-responsive">
                                        <table class="table table-striped">
                                            <thead>
                                                <tr>
                                                    <th>详细地址</th>
                                                    <th>联系人</th>
                                                    <th>联系电话</th>
                                                    <th>操作</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr v-if="addresses.length === 0">
                                                    <td colspan="4" class="text-center">暂无地址数据</td>
                                                </tr>
                                                <tr v-else v-for="address in addresses" :key="address.ID">
                                                    <td>{{ address.Address }}</td>
                                                    <td>{{ address.ContactName }}</td>
                                                    <td>{{ address.ContactTelNo }}</td>
                                                    <td>
                                                        <button class="btn btn-sm btn-danger" @click="deleteAddress(address)">
                                                            <i class="bi bi-trash"></i>
                                                        </button>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 添加电话管理模态框 -->
                    <div class="modal fade" id="telNosModal" tabindex="-1">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">联系方式管理 - {{ selectedCustomer?.Name }}</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                </div>
                                <div class="modal-body">
                                    <!-- 新增联系方式表单 -->
                                    <form @submit.prevent="handleTelNoSubmit" class="mb-4">
                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">联系人</label>
                                                <input type="text" class="form-control" v-model="telNoForm.Owner" required>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">联系电话</label>
                                                <input type="tel" class="form-control" v-model="telNoForm.TelNo" required>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">电子邮箱</label>
                                                <input type="email" class="form-control" v-model="telNoForm.Email">
                                            </div>
                                        </div>
                                        <div class="text-end">
                                            <button type="submit" class="btn btn-primary">
                                                <i class="bi bi-plus-circle"></i> 添加联系方式
                                            </button>
                                        </div>
                                    </form>

                                    <!-- 联系方式列表 -->
                                    <div class="table-responsive">
                                        <table class="table table-striped">
                                            <thead>
                                                <tr>
                                                    <th>联系人</th>
                                                    <th>联系电话</th>
                                                    <th>电子邮箱</th>
                                                    <th>操作</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr v-if="telNos.length === 0">
                                                    <td colspan="4" class="text-center">暂无联系方式数据</td>
                                                </tr>
                                                <tr v-else v-for="telNo in telNos" :key="telNo.ID">
                                                    <td>{{ telNo.Owner }}</td>
                                                    <td>{{ telNo.TelNo }}</td>
                                                    <td>{{ telNo.Email }}</td>
                                                    <td>
                                                        <button class="btn btn-sm btn-danger" @click="deleteTelNo(telNo)">
                                                            <i class="bi bi-trash"></i>
                                                        </button>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </main>
            </div>
        </div>
    </div>

    <!-- Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="js/api/config.js"></script>
    <script src="js/api/auth.js"></script>
    <script src="js/components/Sidebar.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                customers: [],
                searchQuery: {
                    customerNo: '',
                    name: '',
                    level: ''
                },
                currentPage: 1,
                pageSize: 10,
                totalItems: 0,
                form: {
                    LegacyCustomerNo: '',
                    Name: '',
                    DisplayName: '',
                    Sex: '男',
                    Birthday: '',
                    CompanyName: '',
                    CustomerLevel: '普通',
                    PDFName: '',
                    PDFTelNo: '',
                    PDFEmail: '',
                    PDFAddress: '',
                    Memo: '',
                    work_area_id: null
                },
                isEditing: false,
                modal: null,
                currentUser: null,
                selectedCustomer: null,
                passengers: [],
                passengersModal: null,
                passengerForm: {
                    Name: '',
                    Birthday: '',
                    CertificateType: '护照',
                    CertificateNo: ''
                },
                addresses: [],
                addressForm: {
                    Address: '',
                    ContactName: '',
                    ContactTelNo: ''
                },
                addressesModal: null,
                telNos: [],
                telNoForm: {
                    TelNo: '',
                    Owner: '',
                    Email: ''
                },
                telNosModal: null
            },
            computed: {
                totalPages() {
                    return Math.ceil(this.totalItems / this.pageSize);
                }
            },
            created() {
                const userStr = localStorage.getItem(API_CONFIG.USER_KEY);
                if (userStr) {
                    this.currentUser = JSON.parse(userStr);
                    this.form.work_area_id = this.currentUser.workarea_id;
                }
                this.loadCustomers();
            },
            mounted() {
                this.modal = new bootstrap.Modal(document.getElementById('customerModal'));
                this.passengersModal = new bootstrap.Modal(document.getElementById('passengersModal'));
                this.addressesModal = new bootstrap.Modal(document.getElementById('addressesModal'));
                this.telNosModal = new bootstrap.Modal(document.getElementById('telNosModal'));
            },
            methods: {
                async loadCustomers() {
                    try {
                        const response = await window.apiClient.get('/api/customers', {
                            params: {
                                ...this.searchQuery,
                                skip: (this.currentPage - 1) * this.pageSize,
                                limit: this.pageSize
                            }
                        });
                        
                        // 处理直接返回数组的情况
                        if (Array.isArray(response.data)) {
                            this.customers = response.data;
                            this.totalItems = response.data.length;
                        } 
                        // 处理返回 {items, total} 格式的情况
                        else if (response.data && Array.isArray(response.data.items)) {
                            this.customers = response.data.items;
                            this.totalItems = response.data.total;
                        } 
                        // 处理错误情况
                        else {
                            console.error('Invalid response format:', response.data);
                            this.customers = [];
                            this.totalItems = 0;
                        }
                    } catch (error) {
                        console.error('加载客户列表失败:', error);
                        alert('加载客户列表失败');
                        this.customers = [];
                        this.totalItems = 0;
                    }
                },
                formatDate(date) {
                    return new Date(date).toLocaleDateString('zh-CN');
                },
                getCustomerLevelClass(level) {
                    const classes = {
                        '普通': 'badge bg-secondary',
                        'VIP': 'badge bg-primary',
                        '高级VIP': 'badge bg-warning'
                    };
                    return classes[level] || 'badge bg-secondary';
                },
                showCreateModal() {
                    this.isEditing = false;
                    this.resetForm();
                    this.modal.show();
                },
                showEditModal(customer) {
                    this.isEditing = true;
                    this.form = { ...customer };
                    if (this.form.Birthday) {
                        this.form.Birthday = new Date(this.form.Birthday).toISOString().split('T')[0];
                    }
                    this.modal.show();
                },
                async handleSubmit() {
                    try {
                        const submitData = {
                            ...this.form,
                            Birthday: this.form.Birthday ? new Date(this.form.Birthday).toISOString() : null,
                            PDFName: this.form.PDFName || this.form.Name
                        };

                        if (this.isEditing) {
                            await window.apiClient.put(`/api/customers/${this.form.ID}`, submitData);
                        } else {
                            submitData.work_area_id = this.currentUser.workarea_id;
                            await window.apiClient.post('/api/customers', submitData);
                        }
                        this.modal.hide();
                        this.loadCustomers();
                        alert(this.isEditing ? '客户信息更新成功！' : '客户创建成功！');
                    } catch (error) {
                        console.error('保存客户失败:', error);
                        alert(error.response?.data?.detail || '保存失败');
                    }
                },
                resetForm() {
                    this.form = {
                        LegacyCustomerNo: '',
                        Name: '',
                        DisplayName: '',
                        Sex: '男',
                        Birthday: '',
                        CompanyName: '',
                        CustomerLevel: '普通',
                        PDFName: '',
                        PDFTelNo: '',
                        PDFEmail: '',
                        PDFAddress: '',
                        Memo: '',
                        work_area_id: this.currentUser?.workarea_id || null
                    };
                },
                async searchCustomers() {
                    this.currentPage = 1;
                    await this.loadCustomers();
                },
                resetSearch() {
                    this.searchQuery = {
                        customerNo: '',
                        name: '',
                        level: ''
                    };
                    this.searchCustomers();
                },
                async changePage(page) {
                    if (page < 1 || page > this.totalPages) return;
                    this.currentPage = page;
                    await this.loadCustomers();
                },
                handleLogout() {
                    auth.logout();
                },
                async showPassengersModal(customer) {
                    this.selectedCustomer = customer;
                    await this.loadPassengers();
                    this.passengersModal.show();
                },
                async loadPassengers() {
                    try {
                        const response = await window.apiClient.get(`/api/customer-passengers/by-customer/${this.selectedCustomer.ID}`);
                        this.passengers = response.data;
                    } catch (error) {
                        console.error('加载乘客列表失败:', error);
                        alert('加载乘客列表失败');
                    }
                },
                async handlePassengerSubmit() {
                    try {
                        const submitData = {
                            customer_profile_id: this.selectedCustomer.ID,
                            Name: this.passengerForm.Name,
                            BirthdayDTS: new Date(this.passengerForm.Birthday).toISOString(),
                            CertificateType: this.passengerForm.CertificateType,
                            CertificateNo: this.passengerForm.CertificateNo
                        };

                        await window.apiClient.post('/api/customer-passengers/', submitData);
                        await this.loadPassengers();
                        this.resetPassengerForm();
                        alert('乘客添加成功！');
                    } catch (error) {
                        console.error('添加乘客失败:', error);
                        alert(error.response?.data?.detail || '添加失败');
                    }
                },
                async deletePassenger(passenger) {
                    if (!confirm('确定要删除这个乘客吗？')) return;
                    
                    try {
                        await window.apiClient.delete(`/api/customer-passengers/${passenger.ID}`);
                        await this.loadPassengers();
                        alert('乘客删除成功！');
                    } catch (error) {
                        console.error('删除乘客失败:', error);
                        alert('删除乘客失败');
                    }
                },
                resetPassengerForm() {
                    this.passengerForm = {
                        Name: '',
                        Birthday: '',
                        CertificateType: '护照',
                        CertificateNo: ''
                    };
                },
                async showAddressesModal(customer) {
                    this.selectedCustomer = customer;
                    await this.loadAddresses();
                    this.addressesModal.show();
                },
                async loadAddresses() {
                    try {
                        const response = await window.apiClient.get(`/api/customers/${this.selectedCustomer.ID}/addresses`);
                        this.addresses = response.data;
                    } catch (error) {
                        console.error('加载地址列表失败:', error);
                        alert('加载地址列表失败');
                    }
                },
                async handleAddressSubmit() {
                    try {
                        await window.apiClient.post(`/api/customers/${this.selectedCustomer.ID}/addresses`, this.addressForm);
                        await this.loadAddresses();
                        this.resetAddressForm();
                        alert('地址添加成功！');
                    } catch (error) {
                        console.error('添加地址失败:', error);
                        alert(error.response?.data?.detail || '添加失败');
                    }
                },
                async deleteAddress(address) {
                    if (!confirm('确定要删除这个地址吗？')) return;
                    
                    try {
                        await window.apiClient.delete(`/api/customers/${this.selectedCustomer.ID}/addresses/${address.ID}`);
                        await this.loadAddresses();
                        alert('地址删除成功！');
                    } catch (error) {
                        console.error('删除地址失败:', error);
                        alert('删除地址失败');
                    }
                },
                resetAddressForm() {
                    this.addressForm = {
                        Address: '',
                        ContactName: '',
                        ContactTelNo: ''
                    };
                },
                async showTelNosModal(customer) {
                    this.selectedCustomer = customer;
                    await this.loadTelNos();
                    this.telNosModal.show();
                },
                async loadTelNos() {
                    try {
                        const response = await window.apiClient.get(`/api/customers/${this.selectedCustomer.ID}/tel-nos`);
                        this.telNos = response.data;
                    } catch (error) {
                        console.error('加载联系方式列表失败:', error);
                        alert('加载联系方式列表失败');
                    }
                },
                async handleTelNoSubmit() {
                    try {
                        const submitData = {
                            ...this.telNoForm,
                            customer_profile_id: this.selectedCustomer.ID
                        };
                        
                        await window.apiClient.post(`/api/customers/${this.selectedCustomer.ID}/tel-nos`, submitData);
                        await this.loadTelNos();
                        this.resetTelNoForm();
                        alert('联系方式添加成功！');
                    } catch (error) {
                        console.error('添加联系方式失败:', error);
                        alert(error.response?.data?.detail || '添加失败');
                    }
                },
                async deleteTelNo(telNo) {
                    if (!confirm('确定要删除这个联系方式吗？')) return;
                    
                    try {
                        await window.apiClient.delete(`/api/customers/${this.selectedCustomer.ID}/tel-nos/${telNo.ID}`);
                        await this.loadTelNos();
                        alert('联系方式删除成功！');
                    } catch (error) {
                        console.error('删除联系方式失败:', error);
                        alert('删除联系方式失败');
                    }
                },
                resetTelNoForm() {
                    this.telNoForm = {
                        TelNo: '',
                        Owner: '',
                        Email: ''
                    };
                }
            }
        });
    </script>
</body>
</html> 